{% extends "tools/base_tool.html" %}

{% block styles %}
<link rel="stylesheet" href="/static/css/time-converter.css">
{% endblock %}

{% block content %}
<!-- 隐藏的翻译文本字段，供JavaScript使用 -->
<input type="hidden" id="seconds-text" value="{{ get_text('seconds', current_language) }}">
<input type="hidden" id="milliseconds-text" value="{{ get_text('milliseconds', current_language) }}">
<input type="hidden" id="pause-text" value="{{ get_text('pause', current_language) }}">
<input type="hidden" id="resume-text" value="{{ get_text('resume', current_language) }}">
<input type="hidden" id="error-invalid-timestamp" value="{{ get_text('enter_timestamp', current_language) }}">

        
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title h5 mb-0">{{ get_text('current_timestamp', current_language) }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex align-items-center">
                                <h3 id="current-timestamp" class="me-2">-</h3>
                                <span id="timestamp-unit" class="text-muted">{{ get_text('seconds', current_language) }}</span>
                            </div>
                        </div>
                        <div class="btn-group mb-3">
                            <button type="button" class="btn btn-outline-primary" id="toggle-unit">{{ get_text('toggle_unit', current_language) }}</button>
                            <button type="button" class="btn btn-outline-primary" id="copy-timestamp">
                                <i data-feather="copy" class="me-1 feather-copy"></i>{{ get_text('copy', current_language) }}
                            </button>
                            <button type="button" class="btn btn-outline-primary" id="toggle-update">
                                <i data-feather="pause" class="me-1 feather-pause"></i>{{ get_text('pause', current_language) }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title h5 mb-0">{{ get_text('timestamp_to_date', current_language) }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="timestamp-to-date">
                            <div class="mb-3">
                                <label for="input-timestamp" class="form-label">{{ get_text('timestamp', current_language) }}</label>
                                <input type="text" class="form-control" id="input-timestamp" placeholder="{{ get_text('enter_timestamp', current_language) }}">
                            </div>
                            <div class="mb-3">
                                <label for="timestamp-type" class="form-label">{{ get_text('timestamp_type', current_language) }}</label>
                                <select class="form-select" id="timestamp-type">
                                    <option value="s">{{ get_text('seconds', current_language) }} (s)</option>
                                    <option value="ms">{{ get_text('milliseconds', current_language) }} (ms)</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="timestamp-timezone" class="form-label">{{ get_text('timezone', current_language) }}</label>
                                <select class="form-select" id="timestamp-timezone">
                                    <option value="Asia/Shanghai">亚洲/上海 (GMT+8)</option>
                                    <option value="America/New_York">美国/纽约 (GMT-5/GMT-4)</option>
                                    <option value="Europe/London">欧洲/伦敦 (GMT+0/GMT+1)</option>
                                    <option value="Europe/Berlin">欧洲/柏林 (GMT+1/GMT+2)</option>
                                    <option value="Europe/Paris">欧洲/巴黎 (GMT+1/GMT+2)</option>
                                    <option value="Europe/Moscow">欧洲/莫斯科 (GMT+3)</option>
                                    <option value="Asia/Singapore">亚洲/新加坡 (GMT+8)</option>
                                    <option value="Asia/Tokyo">亚洲/东京 (GMT+9)</option>
                                    <option value="Australia/Sydney">澳大利亚/悉尼 (GMT+10/GMT+11)</option>
                                    <option value="UTC">UTC</option>
                                </select>
                            </div>
                            <button type="button" class="btn btn-primary" id="convert-to-date">{{ get_text('convert', current_language) }}</button>
                        </form>
                        <div class="mt-3" id="date-result">
                            <div class="alert alert-info">
                                <p class="mb-0">{{ get_text('datetime', current_language) }}: <span id="date-value">-</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title h5 mb-0">{{ get_text('date_to_timestamp', current_language) }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="date-to-timestamp">
                            <div class="mb-3">
                                <label for="input-datetime" class="form-label">{{ get_text('datetime', current_language) }}</label>
                                <input type="datetime-local" class="form-control" id="input-datetime">
                            </div>
                            <div class="mb-3">
                                <label for="date-timezone" class="form-label">{{ get_text('timezone', current_language) }}</label>
                                <select class="form-select" id="date-timezone">
                                    <option value="Asia/Shanghai">亚洲/上海 (GMT+8)</option>
                                    <option value="America/New_York">美国/纽约 (GMT-5/GMT-4)</option>
                                    <option value="Europe/London">欧洲/伦敦 (GMT+0/GMT+1)</option>
                                    <option value="Europe/Berlin">欧洲/柏林 (GMT+1/GMT+2)</option>
                                    <option value="Europe/Paris">欧洲/巴黎 (GMT+1/GMT+2)</option>
                                    <option value="Europe/Moscow">欧洲/莫斯科 (GMT+3)</option>
                                    <option value="Asia/Singapore">亚洲/新加坡 (GMT+8)</option>
                                    <option value="Asia/Tokyo">亚洲/东京 (GMT+9)</option>
                                    <option value="Australia/Sydney">澳大利亚/悉尼 (GMT+10/GMT+11)</option>
                                    <option value="UTC">UTC</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="output-type" class="form-label">输出类型</label>
                                <select class="form-select" id="output-type">
                                    <option value="s">秒 (s)</option>
                                    <option value="ms">毫秒 (ms)</option>
                                </select>
                            </div>
                            <button type="button" class="btn btn-primary" id="convert-to-timestamp">{{ get_text('convert', current_language) }}</button>
                        </form>
                        <div class="mt-3" id="timestamp-result">
                            <div class="alert alert-info">
                                <p class="mb-0">{{ get_text('timestamp', current_language) }} ({{ get_text('seconds', current_language) }}): <span id="timestamp-value-s">-</span></p>
                                <p class="mb-0">{{ get_text('timestamp', current_language) }} ({{ get_text('milliseconds', current_language) }}): <span id="timestamp-value-ms">-</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block scripts %}
<!-- 引入moment.js库用于时间处理 -->
<script src="../../node_modules/moment/min/moment.min.js"></script>
<script src="../../node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
<!-- 引入自定义脚本 -->
<script src="/static/js/time-converter.js"></script>
{% endblock %}